<template>
  <div class="edit">
    <PersonalHead title="编辑资料" />
    <div class="tbody">
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL + userInfo.head_img"
        alt
        class="assets"
      />
      <img v-else src="@/assets/logo.png" alt class="assets" />
    </div>
    <personalBar lebelText="昵称" :descText="userInfo.nickname" @barClick="isShownickname=true" />
    <personalBar lebelText="密码" descText="***" @barClick="isShowpasswrod=true" />
    <personalBar lebelText="性别" :descText="userInfo.gender==1?'男':'女'" />
    <van-dialog v-model="isShownickname" title="编辑昵称" show-cancel-button @confirm="setNickname">
      <van-field placeholder="请输入昵称" v-model="newnickname"></van-field>
    </van-dialog>
    <van-dialog v-model="isShowpasswrod" title="编辑密码" show-cancel-button @confirm="setPassword">
      <van-field placeholder="请输入密码" v-model="newpasswrod" type="password"></van-field>
    </van-dialog>
  </div>
</template>

<script>
import personalBar from "@/components/personalBar";
import PersonalHead from "@/components/PersonalHead";
export default {
  components: {
    PersonalHead,
    personalBar
  },
  data() {
    return {
      userInfo: {},
      isShownickname: false,
      isShowpasswrod: false,
      newnickname: "",
      newpasswrod: ""
    };
  },
  created() {
    this.loadPage();
  },
  methods: {
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("userId"),
        // headers: {
        //   Authorization: "Bearer " + localStorage.getItem("token")
        // }
      }).then(res => {
        this.userInfo = res.data.data;
      });
    },
    setNickname() {
      let data = {
        nickname: this.newnickname
      };
      this.editProfile(data);
    },
    setPassword() {
      let data = {
        password: this.newpasswrod
      };
      this.editProfile(data);
    },
    editProfile(data) {
      this.$axios({
        url: "/user_update/" + localStorage.getItem("userId"),
        method: "post",
        data: data,
        // headers: { Authorization: "Bearer " + localStorage.getItem("token") }
      }).then(res => {
        this.loadPage();
      });
    }
  }
};
</script>
<style lang="less" scoped>
.tbody {
  height: 44.444vw;
  display: flex;
  align-items: center;
  justify-content: center;
  // text-align: center;
  .assets {
    // margin-top: 5.556vw;
    width: 19.444vw;
    height: 19.444vw;
    border-radius: 50%;
    object-fit: contain;
  }
}
</style>